<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>冒险起源</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script src="js/custom.js" type="text/javascript"></script>
</head>
<body>
<!--header-->
<div class="header">
	<div class="header_bar"></div>
    <div class="header_box x_start_end y_center" >
        <div class="left">
            <a href="javascript:;" class="p0_10 y_center"><i class="m_icon prev"></i></a>
        </div>
        <div class="center t_ellipsis_1">个人设置</div>
        <div class="right"></div>
    </div>
</div>

<!---->
<div class="mem_inp_list">
	<div class="inp_li x_start_end y_center border_b">
    	<span class="name">头像</span>
        <div class="con x_end y_center show_pop_userface">
            <img src="images/user_face/user_face_01.png" class="mem_face" />
            <i class="m_icon more"></i>
        </div>
    </div>
    <div class="inp_li x_start_end y_center border_b">
    	<span class="name">昵称</span>
        <div class="con x_end y_center">
        	<input type="text" value="用户名123456" placeholder="输入昵称" />
        </div>
    </div>
</div>

<div class="clear_h20"></div>
<div class="page_btn_sub">
	<a href="javascript:;" class="btn btn_bg btnc_36f">提交保存</a>
</div>
<div class="clear_h20"></div>

<!--弹窗，头像-->
<div class="js_dialog js_dialog_userface">
	<div class="pop_box pop_userface_box pop_down_box">
        <div class="pop_tit y_center border_b">
        	<h3>选择头像</h3>
            <i class="m_icon pop_close pop_userface_close"></i>
        </div>
        <div class="con_box">
            <div class=" y_center flex_wrap">
                <a href="javascript:;" class="li_box y_center on">
                    <img class="user_face" src="images/user_face/user_face_01.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_02.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_03.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_04.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_05.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_06.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_07.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_08.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_09.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_10.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_11.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_12.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_13.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_14.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_15.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_16.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_17.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_18.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_19.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_20.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_21.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_22.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_23.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_24.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_25.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_26.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_27.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_28.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_29.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_30.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_31.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_32.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_33.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_34.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_35.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_36.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_37.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_38.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_39.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_40.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_41.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_42.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_43.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_44.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_45.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_46.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_47.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_48.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_49.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_50.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_51.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_52.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_53.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_54.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_55.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_56.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_57.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_58.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_59.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_60.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_61.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_62.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_63.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_64.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_65.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_66.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_67.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_68.png" />
                </a>
                <a href="javascript:;" class="li_box y_center">
                    <img class="user_face" src="images/user_face/user_face_69.png" />
                </a>

            </div>
        </div>
        <div class="clear_h20"></div>
    </div>
</div>
 
<script>
$().ready(function(e) {
	
    //弹窗，头像
	pop_box_c({
		show_btn:".show_pop_userface",
		zz:".js_dialog_userface",
		box:".pop_userface_box",
		close:".pop_userface_close",
		body_close:true
	});
	
});
</script>
</body>
</html>
